import React, { Component }from 'react';
import JudgeContent from './JudgeContent';
import MarkStandard from './MarkStandard';
import TextField from 'material-ui/TextField';
import Toggle from 'material-ui/Toggle';

const styles = {
  toggleJudgeButton: {
    width: "90px",
    float: "right",
    padding: '5px'
  }, tableTHeadTd:{
    border: '1px solid #464646'
  }
};


class JudgeRow extends Component {

  /**
   * 打分
   * @param e
   * @param key
   * @param standardScore
   * @private
   */
  _handleChangeScore = (e, key, standardScore) => {

    let score = { ...this.props.markScore };

    const validate = e.target.value;
    if (!/\d/.test(validate)) {
      alert('必须为数字');
      return;
    }
    score.markScore = e.target.value > standardScore ? standardScore : e.target.value;

    this.props.commitScore(score, this.props.row.classify ? this.props.row.classify : this.props.row.name);
  };

  /**
   * 选择扣分标准
   * @param key
   * @private
   */
  _handleSelectMarkStandard = (key) => {


    let score = { ...this.props.markScore };


    //如果存在就去除，不存在就添加
    if (score.selectMarkStandard.indexOf(key) === -1) {
      score.selectMarkStandard.push(key);
    } else {
      score.selectMarkStandard.splice(score.selectMarkStandard.indexOf(key), 1);
    }
    this.props.commitScore(score, this.props.row.classify ? this.props.row.classify : this.props.row.name);
  };

  /**
   * 修改是否参与考核
   * @param e
   * @param toggle
   * @private
   */
  _handleChangeIsJudge = (e, toggle) => {
    let score = { ...this.props.markScore };
    score.isJudge = toggle;
    this.props.commitScore(score, this.props.row.classify ? this.props.row.classify : this.props.row.name);
  };

  /**
   * 添加或者修改打分备注
   * @param e
   * @private
   */
  _handleChangeDescription = (e) => {
    let score = { ...this.props.markScore };

    score.description = e.target.value;
    this.props.commitScore(score, this.props.row.classify ? this.props.row.classify : this.props.row.name);
  };

  render() {
    const { row, index, markScore, canMark } = this.props;

    return (
      <tr key={index}>
        <td style={styles.tableTHeadTd}>{index + 1}</td>
        {row.name ? <td style={styles.tableTHeadTd} rowSpan={row.rowspan}>{row.name}</td> : null}
        {row.classify ? <td style={styles.tableTHeadTd}>{row.classify}</td> : null}
        <td style={styles.tableTHeadTd}>{row.judgeMethod}</td>
        <td style={styles.tableTHeadTd}><JudgeContent content={row.content}/></td>

        <td style={styles.tableTHeadTd}><MarkStandard canMark={canMark} list={row.judgeItems} markStandardSelected={markScore['selectMarkStandard']}
                          selectMarkStandard={this._handleSelectMarkStandard}/></td>
        <td style={styles.tableTHeadTd}>{row.standardScore}</td>
        {
          canMark ?
            <td style={[{ width: '50px' },styles.tableTHeadTd]}>
              <Toggle
                onToggle={(e, toggle) => this._handleChangeIsJudge(e, toggle)}
                label={markScore.isJudge ? '考核' : "不考核"}
                defaultToggled={markScore.isJudge}
                style={styles.toggleJudgeButton}
              />
              {markScore.isJudge ?
                <TextField value={markScore.markScore}
                           hintText="评分"
                           onChange={(e) => this._handleChangeScore(e, row.name, row.standardScore)}/>
                : "/"
              }
              <textarea style={{ width: '200px', height: '80px' }} placeholder="备注说明:"
                        onBlur={(e) => this._handleChangeDescription(e)} defaultValue={markScore.description}/>
            </td> :
            <td style={styles.tableTHeadTd}>{markScore.markScore}<br/>{markScore.description ? <span
              style={{ fontSize: '10px', display: 'block', float: 'left',width:'100px',wordBreak:'break-all' }}>{markScore.description}</span> : null}
            </td>}

      </tr>
    );
  }
}

export default JudgeRow;